﻿@page "/forum/article"
@using AntDesign
@layout MainLayout
@inject NavigationManager Nav
@inject HttpClient Http
@inject ArticleService _articleService
<div>

    <!-- 文章主体 -->
    <Card Bordered="@false" Style="fill">
        <!-- 作者信息 -->
        <div class="author-info">
            <Avatar Src="@authorAvatar" Size="AvatarSize.Large"></Avatar>
            <div class="meta">
                <h3>
                    @AuthorName
                </h3>
                <span>@(MomentHelper.FromNow(DateTime.Now.AddDays(-5)))</span>
            </div>
        </div>
        <Divider />
        <Title Level="1">@article.Title</Title>
        <Paragraph Style="text-align : left">
            @((MarkupString)markdown)
        </Paragraph>
    </Card>

    <!-- 评论区域 -->
    <div>
        @if (comments.Count > 0)
        {
            <!-- 评论列表 -->
            <AntList DataSource="@comments" TItem="CommentModel" Header="@header" Class="comment-list">
                <ListItem>
                    <Comment Avatar="@context.Avatarpath"
                    Author="@context.AuthorName"
                    DatetimeTemplate="@context.CreateTime"
                    Content="@context.Content"></Comment>
                </ListItem>
            </AntList>
        }
        <!-- 回复框 -->
        <Comment Avatar="@userAvatar">
            <ContentTemplate>
                @replyEditor(@SubmitComment)
            </ContentTemplate>
        </Comment>
    </div>
</div>


@code {
    [Parameter] public int Id { get; set; }
    private Article article = new();

    private string markdown = "";
    // Find by AuthorId
    private string authorAvatar = "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
    private string userAvatar = "https://th.bing.com/th/id/R.46efb6b132359fffe2b27a2afad41aec?rik=aYpOdA9ytO1TDg&riu=http%3a%2f%2fwww.pngall.com%2fwp-content%2fuploads%2f7%2fDoge-PNG-Free-Download.png&ehk=3OXJjsWZIj5SykzQ7dqNbSsMWPE2XMDno1QoG5qvUpM%3d&risl=&pid=ImgRaw&r=0";
    private string AuthorName = "张三";
    private string replyContent = "";

    protected override async Task OnInitializedAsync()
    {

        await LoadData();
    }

    private async Task LoadData()
    {
        var pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
        Article article =  await _articleService.GetArticleByIdAsync(1);
        markdown = Markdig.Markdown.ToHtml(article.Content??"", pipeline);
    }


    private bool submitting = false;
    RenderFragment replyAction =@<span>Reply to</span>;
    private RenderFragment replyEditor(Action onSubmit)
    {
        return @<div>
            <TextArea MinRows="4" @bind-Value="@replyContent"
            Placeholder="写下你的评论..." />

            <Button Type="ButtonType.Primary"
            OnClick="SubmitComment"
            Loading="@submitting"
            Style="margin-top: 12px">
                发表评论
            </Button>
        </div>
        ;
    }

    private async void SubmitComment()
    {
        if (string.IsNullOrEmpty(replyContent)) return;

        submitting = true;
        try
        {
            // 模拟提交评论
            string yourAvatarPath = "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
            comments.Add(new CommentModel
                    {
                        Id = comments.Count + 1,
                        AuthorName = "your Name",
                        Avatarpath = yourAvatarPath,
                        Content = replyContent,
                        CreateTime =  @<Tooltip Title="@(DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd HH:mm:ss"))">
        <span>
            @(MomentHelper.FromNow(DateTime.Now.AddDays(-1)))
        </span>
    </Tooltip>,
            });
            replyContent = "";
            await InvokeAsync(StateHasChanged);

        }
        finally
        {
            submitting = false;
        }
    }


    List<CommentModel> comments = new List<CommentModel>()
    {
        new CommentModel
        {
            Id = 1,
            AuthorName = "李四",
            Avatarpath = @"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            Content = "这篇文章对C语言中最重要的概念之一——指针进行了系统而清晰的讲解，从基础到进阶，覆盖了多种实际应用场景，是一篇非常适合初学者和中级开发者阅读的技术文章。",
            CreateTime = @<Tooltip Title="@(DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd HH:mm:ss"))">
        <span>
            @(MomentHelper.FromNow(DateTime.Now.AddDays(-1)))
        </span>
    </Tooltip>,
        }
    };

    RenderFragment header =>
    @<div>
        @if (comments.Any())
    {
        <span>
            @($"{comments.Count} {(comments.Count > 1 ? "replies" : "reply")}")
        </span>
    }
    </div>
    ;

    public class CommentModel 
    {
        public int Id { get; set; }
        public string AuthorName { get; set; }
        public string Avatarpath { get; set; }
        public string Content { get; set; }
        public RenderFragment CreateTime { get; set; }
    }

    public class Author 
    {
        public string Name { get; set; }
        public string Avatar { get; set; }
    }
}

<style>
.author-info {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.author-info .meta {
    margin-left: 12px;
}


</style>